<template>
  <div ref="animationContainer"></div>
</template>

<script>
import lottie from 'lottie-web';
import {
  noData,
  noDataClass,
  noDataJiaocai,
  noDataJiaocan,
  noDataXiaoxi,
  noDataGuanlian,
  noDataZuoye,
  noDataNetwork,
  noDataFail,
} from '@/json/json.js';

export default {
  name: 'LottieAnimation',
  props: {
    noDataName: {
      type: String,
      // required: true,
    },
  },
  data() {
    return {
      // noDataName: 'noDataClass',
    };
  },
  mounted() {
    this.loadObject();
  },
  beforeDestroy() {
    if (this.animation) {
      this.animation.destroy();
    }
  },
  created() {},
  methods: {
    // 动态配置对象
    async loadObject() {
      switch (this.noDataName) {
        case 'noDataClass':
          this.animationData = noDataClass;
          break;
        case 'noDataJiaocai':
          this.animationData = noDataJiaocai;
          break;
        case 'noDataJiaocan':
          this.animationData = noDataJiaocan;
          break;
        case 'noDataXiaoxi':
          this.animationData = noDataXiaoxi;
          break;
        case 'noDataGuanlian':
          this.animationData = noDataGuanlian;
          break;
        case 'noDataNetwork':
          this.animationData = noDataNetwork;
          break;
        case 'noDataZuoye':
          this.animationData = noDataZuoye;
          break;
        case 'noDataFail':
          this.animationData = noDataFail;
          break;
        default:
          this.animationData = noData;
          break;
      }
      this.loadAnimation();
    },
    // 生成动画
    loadAnimation() {
      this.animation = lottie.loadAnimation({
        container: this.$refs.animationContainer,
        renderer: 'svg',
        loop: false,
        autoplay: true,
        animationData: this.animationData,
      });
    },
  },
};
</script>

<style>
.animationContainer {
  width: 200px;
}
</style>
